<template>
  <!-- 菜单主体 -->
  <el-menu
    default-active="2"
    class="el-menu-vertical-demo"
    @open="handleOpen"
    @close="handleClose"
    background-color="#5b5e66"
    text-color="#fff"
    active-text-color="#F56C6C"
    unique-opened
    :collapse="collapse"
    mode="vertical"
    :collapse-transition="false"
    :router="true"
    :defaultActive="activePath"
  >
    <!-- 一级菜单1 -->
    <el-submenu
      v-for="(i, index) in menuList"
      :index="index + 1 + ''"
      :key="index"
    >
      <template #title>
        <i :class="icons[index]"></i>
        <span>{{ i.authName }}</span>
      </template>
      <!-- 二级菜单1- -->
      <el-menu-item
        v-for="(item, index2) in i.children"
        :key="index2"
        :index="'/' + item.path"
        @click="saveNavState('/' + item.path)"
      >
        <template #title>
          <i class="el-icon-menu"></i>
          <span>{{ item.authName }}</span>
        </template>
      </el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import { getMenu } from "@/network/getMenu.js";
export default {
  name: "left-menu",
  data() {
    return {
      menuList: [], //左侧菜单数据
      icons: [
        "el-icon-s-custom",
        "el-icon-s-platform",
        "el-icon-box",
        "el-icon-shopping-cart-full",
        "el-icon-data-line",
      ],
      activePath: null, //当前位置
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
    //保存菜单激活状态
    saveNavState(path) {
      window.sessionStorage.setItem("activePath", path);
      this.activePath = path;
      this.openFullScreen2();
    },
    openFullScreen2() {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 1)",
      });
      setTimeout(() => {
        loading.close();
      }, 500);
    },
  },
  // 获取菜单数据
  async created() {
    let { data: res } = await getMenu();
    if (res.meta.status !== 200) {
      return this.$message.error(res.meta.message);
    } else {
      this.menuList = res.data;
      // console.log(this.menuList);
    }
    // console.log(res);

    this.activePath = window.sessionStorage.getItem("activePath");
  },
  computed: {
    getIcon(index) {},
  },
  props: {
    collapse: {
      type: Boolean,
    },
  },
};
</script>

<style lang="less" scoped>
.el-menu {
  // 去掉边框线
  border-right: none;
}
</style>
